import React, { PureComponent } from 'react';
import {  Icon, Table, Select, Button, Form } from 'antd';
import { connect } from 'dva';
import Tab from "../tab"
import "./form.less"
import "../../Common.less"
class AttachComponentForm extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            bridgeList: [],
            count: 0,
            name: "",
            columns: [],
            allChecked: false,
            st: null,
            qString: "",
            pagination: {
                pageSize: 5,
                pageNum: 1
            },
            loading: false,
            total: 0,
        }
        this.paginationChange = this.paginationChange.bind(this)
        this.getData = this.getData.bind(this);
        this.massEdit=this.massEdit.bind(this)
        this.editComponent = this.editComponent.bind(this);
    }
    editComponent(e, item) {

    }
    getData() {

        if (this.props.getProjects) {
            this.props.getProjects({ ...this.state.pagination }, (data) => {

                if (data && data.rows && data.rows.length) {
                    data.rows.map(item => {
                        item.checked = false;
                        item.edit = false;
                    })
                }

                this.setState({
                    loading: false,
                    data: data ? data.rows : [],
                    total: data ? data.total : 0
                })
                if (this.props.onSuccess) {
                    this.props.onSuccess(data);
                }
            }, (error) => {

                if (this.props.onError) {
                    this.props.onError(error);
                }
                this.setState({
                    loading: false,
                    data: [],
                    total: 0
                })
            });
        }
    }
    massEdit(e){
        e.persist();
        e.preventDefault();
        
        if(this.props.modalContext){
            this.props.modalContext.updateModal({
                visible: true,
                title: "选择构件",
                event: { code:"structureSelect"},
                extra:{
                     "nodeType":5
                }
              });
        }
    }
    async paginationChange(pagination, filters, sorter, extra) {
        await this.setState({
            pagination: {
                ...this.state.pagination,
                pageNum: pagination.current
            }
        })
        this.getData()
    }
    async componentDidMount() {
        let {project}=this.props;
        if (this.props.onLoaded) {
            this.props.onLoaded(this);
        }
        if (this.props.loadProjectBridges) {
            let res = await this.props.loadProjectBridges({ projectId: project.id })
            this.setState({
                bridgeList: res
            })
        }
        const columns = [
            {
                title: '联号',
                width: "350px",
                dataIndex: 'lh',
                sortDirections: ['descend', 'ascend'],
                sorter: (a, b) => a.lh.localeCompare(b.lh)
            },
            {
                title: '构件',
                dataIndex: 'name',
                sortDirections: ['descend', 'ascend'],
                sorter: (a, b) => a.name - b.name
            },
            {
                title: '编辑构件',
                key: 'action',
                render: (text, record) => <span className="operate absMiddle"><a onClick={(e) => this.editComponent(e, record)}><Icon type="edit" />编辑</a></span>,
            },
        ];
        this.setState({
            columns
        })
    }

    render() {
        let { columns,data, bridgeList, pagination, total, loading } = this.state
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="absMiddle topComponent">
                {/* <Tab menus={[{
                    name: '上部附属'
                }, {
                    name: '下部附属'
                }, {
                    name: '其他'
                }]} index={0}></Tab>
                <div className="absMiddle sorter">
                <Form style={{padding: "15px 15px" }}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 19 }}
                    >
                        <Form.Item label='桥梁'>
                            {getFieldDecorator('designStage', {
                                rules: [
                                    { required: true, message: '桥梁' }
                                ]
                            })(
                                <Select placeholder="请选择桥梁"
                                    onChange={this.handleChange}>
                                    {bridgeList && bridgeList.length ? bridgeList.map((r, i) => (
                                        <Select.Option key={r.id} value={r.id}>{r.name}</Select.Option>
                                    )) : ''}
                                </Select>
                            )}
                        </Form.Item>
                        <Button onClick={e=>this.massEdit(e)} style={{ background: '#1890ff', borderColor: '#1890ff' }} type="primary">批量编辑</Button>
                    </Form>

                </div>
                <Table className="absMiddle" rowKey={record => record.id} onChange={this.paginationChange} pagination={{ 'current': pagination.pageNum, total }} loading={loading} columns={columns} dataSource={data} /> */}
            </div>
        );
    }
}

export default connect(
    ({

    }) => {
        return {};
    },
    dispatch => ({
        loadProjectBridges: (values) => dispatch({
            type: 'bridge/loadProjectBridges',
            payload: values
        }),
    })
)(Form.create('AttachComponentForm', {

})(AttachComponentForm));